<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局域网文件传输</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        body {
            background-color: #f5f5f5;
            color: #333;
            padding: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }
        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
            text-align: center;
            font-size: 24px;
        }
        .upload-area {
            border: 2px dashed #ccc;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        .upload-area.highlight {
            border-color: #4CAF50;
            background-color: rgba(76, 175, 80, 0.1);
        }
        .upload-area p {
            margin-bottom: 15px;
            font-size: 16px;
            color: #666;
        }
        .file-input {
            display: none;
        }
        .upload-btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .upload-btn:hover {
            background-color: #45a049;
        }
        .file-list {
            border-top: 1px solid #eee;
            margin-top: 20px;
        }
        .file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }
        .file-info {
            flex: 1;
            overflow: hidden;
        }
        .file-name {
            font-weight: bold;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .file-meta {
            font-size: 12px;
            color: #888;
        }
        .file-actions a {
            margin-left: 10px;
            text-decoration: none;
            color: #2196F3;
        }
        .file-actions a:hover {
            text-decoration: underline;
        }
        .file-actions a.delete {
            color: #f44336;
        }
        .file-actions a.preview {
            color: #FF9800;
        }
        .progress-container {
            margin-top: 20px;
            display: none;
        }
        .progress-bar {
            height: 10px;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin-bottom: 5px;
            overflow: hidden;
        }
        .progress {
            height: 100%;
            background-color: #4CAF50;
            width: 0;
            transition: width 0.3s;
        }
        .progress-text {
            font-size: 14px;
            color: #666;
        }
        .no-files {
            text-align: center;
            padding: 20px;
            color: #888;
        }
        .file-type-icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
        .mobile-tip {
            text-align: center;
            margin-top: 10px;
            color: #666;
            font-size: 14px;
        }
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            .container {
                padding: 15px;
            }
            .file-actions {
                display: flex;
            }
            .file-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .file-actions {
                margin-top: 10px;
                align-self: flex-end;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>局域网文件传输</h1>
        <div class="upload-area" id="dropZone">
            <p>拖放文件到此处上传或点击下方按钮选择文件</p>
            <form id="uploadForm" method="post" action="/upload" enctype="multipart/form-data">
                <input type="file" name="file" id="fileInput" class="file-input">
                <button type="button" id="selectFileBtn" class="upload-btn">选择文件</button>
            </form>
            <div class="progress-container" id="progressContainer">
                <div class="progress-bar">
                    <div class="progress" id="progressBar"></div>
                </div>
                <div class="progress-text" id="progressText">0%</div>
            </div>
        </div>
    </div>

    <div class="container">
        <h1>已上传文件</h1>
        <div class="file-list">
            {% if files %}
                {% for file in files %}
                <div class="file-item">
                    <div class="file-info">
                        <div class="file-name">{{ file.name }}</div>
                        <div class="file-meta">
                            大小: {{ file.size }} | 上传时间: {{ file.time }}
                        </div>
                    </div>
                    <div class="file-actions">
                        {% if file.can_preview %}
                        <a href="/preview/{{ file.name }}" class="preview">预览</a>
                        {% endif %}
                        <a href="/download/{{ file.name }}">下载</a>
                        <a href="/delete/{{ file.name }}" class="delete" onclick="return confirm('确定删除此文件吗?')">删除</a>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="no-files">暂无文件</div>
            {% endif %}
        </div>
    </div>

    <div class="mobile-tip">
        在手机浏览器中，点击"选择文件"按钮可以选择照片或文件进行上传
    </div>

    <script>
        // 获取DOM元素
        const dropZone = document.getElementById('dropZone');
        const fileInput = document.getElementById('fileInput');
        const selectFileBtn = document.getElementById('selectFileBtn');
        const uploadForm = document.getElementById('uploadForm');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');

        // 点击选择文件按钮时触发文件输入框的点击
        selectFileBtn.addEventListener('click', () => {
            fileInput.click();
        });

        // 文件选择后自动上传
        fileInput.addEventListener('change', () => {
            if (fileInput.files.length > 0) {
                uploadFile();
            }
        });

        // 文件拖拽相关事件
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            dropZone.addEventListener(eventName, highlight, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, unhighlight, false);
        });

        function highlight() {
            dropZone.classList.add('highlight');
        }

        function unhighlight() {
            dropZone.classList.remove('highlight');
        }

        // 处理文件拖放
        dropZone.addEventListener('drop', handleDrop, false);

        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            
            if (files.length > 0) {
                fileInput.files = files;
                uploadFile();
            }
        }

        // 上传文件
        function uploadFile() {
            const formData = new FormData(uploadForm);
            const xhr = new XMLHttpRequest();

            // 显示进度条
            progressContainer.style.display = 'block';
            selectFileBtn.disabled = true;

            xhr.upload.addEventListener('progress', (e) => {
                if (e.lengthComputable) {
                    const percentComplete = (e.loaded / e.total) * 100;
                    progressBar.style.width = percentComplete + '%';
                    progressText.textContent = percentComplete.toFixed(1) + '%';
                }
            });

            xhr.addEventListener('load', () => {
                // 上传完成后刷新页面显示新文件
                window.location.reload();
            });

            xhr.addEventListener('error', () => {
                alert('上传失败，请重试');
                progressContainer.style.display = 'none';
                selectFileBtn.disabled = false;
            });

            xhr.open('POST', '/upload', true);
            xhr.send(formData);
        }
    </script>
</body>
</html> 